<template>
  <div class="low-playlist">
    <ul class="playlist-list">
      <li class="playlist-item soft white" v-for="playlist in playLists" :key="playlist.id" @click="gotoPlayListDetails(playlist.id)">
        <div class="cover">
          <van-image class="soft" round width="100%" height="100%" :src="playlist.picUrl" />
        </div>
        <div class="text">
          <v-text :text="playlist.name" />
          <div class="hot">
            <van-icon class-prefix="music" name="remen" />
            <span>{{toShortUnit(playlist.playCount)}}</span>
          </div>
        </div>
        <div class="count">
          <van-icon class-prefix="music" name="yinle" class="micon" />
          <span>{{playlist.trackCount}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {defineProps} from "vue";
import {useRouter} from "vue-router";
import {toShortUnit} from "../../common/util";

let router = useRouter();

let propsDef = defineProps({
  playLists:Array
});
console.log(propsDef.playLists)
function gotoPlayListDetails(playlistId){
  router.push("/playlist/"+playlistId);
}

</script>

<style lang="scss" scoped>
.low-playlist{
  width:100%;
  .playlist-list{
    display: flex;
    flex-wrap: wrap;

    .playlist-item{
      display: flex;
      width: 98%;
      padding: .5rem;
      margin: .4rem;
      align-items: center;
      box-sizing: border-box;
      .cover{
        width: 3rem;
        height: 3rem;
      }
      .text{
        padding: 0 .5rem;
        font-size: 14px;
        width: 54vw;
        color: #616161;
        .hot{
          color: red;
          font-size: 12px;
          margin-top: .2rem;
        }
      }
      .count{
        font-size: 12px;
        color: #07c160;
        width: 3rem;
        .micon{
          margin-right: .5rem;
        }
      }
    }
  }
}
</style>